<template>
  <div class="app-container customer-div">
    <el-tabs v-model="activeName">
      <el-tab-pane label="今日库存查询" name="first">
            <div style="margin-top: 20px">
              <!--搜索-->
              <el-form :inline="true" :model="listQuery" size="mini" label-width="80px">
                <el-form-item label="关键字：">
                  <el-input v-model="listQuery.goodsSn" placeholder="牌号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    @click="handleSearchList()"
                    type="primary">
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
            <!--数据列表-->
            <div>
              <el-radio-group v-model="listQuery.goodsClass" size="mini" @change="handleSearchList">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button :label="item.cddValue" v-for="(item,index) in classList" :key="index"></el-radio-button>
              </el-radio-group>
              <div style="text-align: center;padding:10px;font-weight: bold">{{nowData}}库存</div>
            </div>
            <div class="table-container">
              <el-table
                cell-class-name="stockCell"
                :cell-style="{padding:0}"
                v-loading="listLoading"
                :data="tableData"
                border
                style="width: 100%; margin-top: 20px">
                <el-table-column
                  label="品名"
                  min-width="100"
                  align="center">
                  <template slot-scope="scope">
                    {{scope.row.goodsClass}}
                  </template>
                </el-table-column>
                <el-table-column

                  label="牌号"
                  min-width="150"
                  align="center">
                  <template slot-scope="scope">
                      <div v-for="(item,index) in scope.row.list" :style="{'border-bottom':index == scope.row.list.length -1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}" style="line-height: 28px;height:28px">{{item.goodsSn}}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  v-for="item in warehouseList"
                  :label="item.warehouseName"
                  :key="item.warehouseId"
                  min-width="80"
                  align="center">
                  <template slot-scope="scope">
                    <div v-for="(ee,index) in scope.row.list" :style="{'border-bottom':index == scope.row.list.length -1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}" style="line-height: 28px;height:28px">
                      {{ ee['stock'][item.warehouseId] ? ee['stock'][item.warehouseId]['stock'] : 0 }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="预计入库数量（3天内）"
                  min-width="80"
                  align="center">
                  <template slot-scope="scope">
                    <div v-for="(item,index) in scope.row.list" :style="{'border-bottom':index == scope.row.list.length -1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}" style="line-height: 28px;height:28px">{{item.expectStock}}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="价格"
                  min-width="100"
                  align="center">
                  <template slot-scope="scope">
                    <div v-for="(item,index) in scope.row.list" :style="{'border-bottom':index == scope.row.list.length -1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}" style="line-height: 28px;height:28px">{{item.price}}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="更新时间"
                  min-width="150"
                  align="center">
                  <template slot-scope="scope">
                    <div v-for="(item,index) in scope.row.list" :style="{'border-bottom':index == scope.row.list.length -1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}" style="line-height: 28px;height:28px">{{item.time}}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
<!--            <div class="pagination-container">-->
<!--              <el-pagination-->
<!--                background-->
<!--                @size-change="handleSizeChange"-->
<!--                @current-change="handleCurrentChange"-->
<!--                layout="total, sizes,prev, pager, next,jumper"-->
<!--                :current-page.sync="listQuery.pageNum"-->
<!--                :page-size="listQuery.pageSize"-->
<!--                :page-sizes="[10,15,20]"-->
<!--                :total="count">-->
<!--              </el-pagination>-->
<!--            </div>-->
      </el-tab-pane>
      <el-tab-pane label="日库存管理" name="second" v-if="saleDayStockSetting">
        <div style="margin-top: 20px">
          <el-radio-group v-model="listQuery2.isMy" size="mini" @change="changeisMy">
            <el-radio-button label="1">我负责的</el-radio-button>
            <el-radio-button label="0" v-if="allSaleDayStockSetting">全部</el-radio-button>
          </el-radio-group>
        </div>
        <div style="margin-top: 20px">
          <!--搜索-->
          <el-form :inline="true" :model="listQuery2" size="mini" label-width="80px">
            <el-form-item label="关键字：">
              <el-input v-model="listQuery2.goodsSn" placeholder="牌号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="handleSearchList2()"
                type="primary">
                查询
              </el-button>
              <el-button
                :loading="btnLoading4"
                size="mini"
                @click="synckc()"
                type="primary">
                生成当日库存
              </el-button>
              <el-button
                :loading="btnLoading3"
                size="mini"
                @click="fabuStock()"
                type="primary">
                确认发布
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading2"
            :data="tableData2"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="品名"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                 {{scope.row.goodsClass}}
              </template>
            </el-table-column>
            <el-table-column
              label="牌号"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.goodsSn}}
              </template>
            </el-table-column>
            <el-table-column align="center" v-for="item in warehouseList" :label="item.warehouseName" :key="item.warehouseId">
              <el-table-column
                min-width="100"
                align="center">
                  <template slot="header" slot-scope="scope">
                    <el-tooltip content="金蝶库存数量" placement="bottom" effect="dark">
                      <span>系统 <i class="el-icon-warning"/></span>
                    </el-tooltip>
                  </template>
                <template slot-scope="scope">
                  <span v-if="scope['row']['stock']">
                      {{scope['row']['stock'][item.warehouseId] ? scope['row']['stock'][item.warehouseId]['systemStock']  : 0 }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                align="center">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="默认系统库存，可以修改调整" placement="bottom" effect="dark">
                    <span>实际 <i class="el-icon-warning"/></span>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <span v-if="scope['row']['stock']" style="color:#409EFF">
                     {{scope['row']['stock'][item.warehouseId] ? scope['row']['stock'][item.warehouseId]['authStock']  : 0 }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                align="center">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="实际库存，今日销量（按销售合同中对应的发货仓库）" placement="bottom" effect="dark">
                    <span>可用 <i class="el-icon-warning"/></span>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <span style="color:red" v-if="scope['row']['stock']">
                     {{scope['row']['stock'][item.warehouseId] ? scope['row']['stock'][item.warehouseId]['stock']  : 0 }}
                  </span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="预计入库数量（3天内）"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                <span>
                  {{scope.row.expectStock}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="价格"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                <span>
                  {{scope.row.price}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.time}}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.state == 1 ? '已发布' : '未发布'}}
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column
              label="更新人"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.updateName}}
              </template>
            </el-table-column>
            <el-table-column
              label="创建人"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.createName}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="showPop(scope.row)">修改</el-button>
                <el-button type="text" @click="delItem(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!--数据列表-->
        <div class="table-container">
          <div style="font-size:14px;font-weight: bold;padding-top:5px">已删除的数据</div>
          <el-table
            v-loading="listLoading3"
            :data="tableData3"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="品名"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.goodsClass}}
              </template>
            </el-table-column>
            <el-table-column
              label="牌号"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.goodsSn}}
              </template>
            </el-table-column>
            <el-table-column align="center" v-for="item in warehouseList" :label="item.warehouseName" :key="item.warehouseId">
              <el-table-column
                min-width="100"
                align="center">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="金蝶库存数量" placement="bottom" effect="dark">
                    <span>系统 <i class="el-icon-warning"/></span>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                <span v-if="scope['row']['stock']">
                    {{scope['row']['stock'][item.warehouseId] ? scope['row']['stock'][item.warehouseId]['systemStock']  : 0 }}
                </span>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                align="center">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="默认系统库存，可以修改调整" placement="bottom" effect="dark">
                    <span>实际 <i class="el-icon-warning"/></span>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                <span v-if="scope['row']['stock']" style="color:#409EFF">
                   {{scope['row']['stock'][item.warehouseId] ? scope['row']['stock'][item.warehouseId]['authStock']  : 0 }}
                </span>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                align="center">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="实际库存，今日销量（按销售合同中对应的发货仓库）" placement="bottom" effect="dark">
                    <span>可用 <i class="el-icon-warning"/></span>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                <span style="color:red" v-if="scope['row']['stock']">
                   {{scope['row']['stock'][item.warehouseId] ? scope['row']['stock'][item.warehouseId]['stock']  : 0 }}
                </span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="预计入库数量（3天内）"
              min-width="150"
              align="center">
              <template slot-scope="scope">
              <span>
                {{scope.row.expectStock}}
              </span>
              </template>
            </el-table-column>
            <el-table-column
              label="价格"
              min-width="100"
              align="center">
              <template slot-scope="scope">
              <span>
                {{scope.row.price}}
              </span>
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.time}}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.state == 1 ? '已发布' : '未发布'}}
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column
              label="更新人"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.updateName}}
              </template>
            </el-table-column>
            <el-table-column
              label="创建人"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.createName}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="hfItem(scope.row)">恢复</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!--修改库存-->
    <el-dialog
      :close-on-click-modal="false"
      title="修改库存"
      :visible.sync="dialogVisible"
      width="700px">
      <div style="max-height: 600px;overflow-y: auto;overflow-x: hidden">
        <el-form :model="form" size="mini" label-width="100px" ref="form" :rules="rules">
          <el-row :gutter="20">
            <el-col :span="12"><el-form-item label="库存日期：" style="margin-bottom:0">{{nowData}}</el-form-item></el-col>
            <el-col :span="12"><el-form-item label="品名牌号：" style="margin-bottom:0">{{form.goodsClass}} / {{form.goodsSn}}</el-form-item></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12"><el-form-item label="价格："><el-input v-model="form.price" style="width:150px"></el-input></el-form-item></el-col>
            <el-col :span="12"><el-form-item label="预计入库数量："><el-input v-model="form.expectStock" style="width:150px"></el-input></el-form-item></el-col>
          </el-row>

          <el-row :gutter="20" >
            <el-col :span="12" v-for="(item,index) in form.warehouseList" :key="index" style="margin-bottom:10px;">
              <div style="border:1px solid #DCDFE6;padding:10px 0 ;background: #f8f8f8">
                <div style="font-weight: bold;padding-left:10px">
                  {{item.warehouseName}}
                  <span style="font-weight: 400;font-size:12px;padding-left:20px;">
                  系统库存：<span style="font-weight: bold">{{item.systemStock}}</span> / 可用库存：
                  <span style="font-weight: bold">{{item.stock}}</span>
                </span>
                </div>
                <el-form-item label="实际库存:" label-width="80px" style="margin-top:10px;">
                  <el-input v-model="item.authStock" style="width:150px"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {goodsWarehouseList,goodsStockList,goodsDayStockList,goodsClassList,goodsUpdateStock,pushStock,renewStock,deleteStock} from '@/api/partner'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'
  const defaultListQuery={
    "goodsClass": "",
    "goodsSn": "",
    // "pageNum": 1,
    // "pageSize": 10,
  };
  const defaultListQuery2={
    "isMy": "1",
    isDelete:0,
    "goodsSn": "",

  };

  const defaultListQuery3={
    "isMy": "1",
    isDelete:1
  };

  const defaultForm={
    "kgId": "",
    "goodsSn": "",
    goodsClass:'',
    warehouseList:[],
    price:'',
    expectStock:''
  };
  const defaultItem={
    "stockId": "",
    "warehouseName": "",
    systemStock:'',
    stock:'',
    authStock:''
  };
  export default {
    name: "index",
    data(){
      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        tableData: [],
        listLoading: false,
        roles:store.getters.roles ? store.getters.roles : [],
        loading:false,
        count:0,
        activeName:'first',
        nowData:formatDate(new Date(),'yyyy年MM月dd日'),

        listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
        tableData2: [{},{}],
        listLoading2: false,
        count2:0,
        cellIndex:'',
        cellLabel:'',
        warehouseList:[],
        classList:[],

        listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
        tableData3: [{},{}],
        listLoading3: false,
        count3:0,

        dialogVisible:false,
        form:JSON.parse(JSON.stringify(defaultForm)),
        btnLoading:false,
        rules:{},
        btnLoading3:false,
        btnLoading4:false
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId',
        'isMange',
      ]),
      saleDayStockSetting(){
        if(this.roles.indexOf("saleDayStockSetting") != -1){
          return true
        }else{
          return false
        }
      },
      allSaleDayStockSetting(){
        if(this.roles.indexOf("allSaleDayStockSetting") != -1){
          return true
        }else{
          return false
        }
      },
    },
    created() {
      this.getList();
      this.getList2();
      this.getList3();
      this.getGoodsWarehouseList();
      this.getgoodsClassList();

    },
    filters: {



    },
    methods:{
      delItem(item){
        this.$confirm('确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteStock({stockId:item.stockId,isDelete:1}).then(()=>{
            this.handleSearchList2()
            this.handleSearchList3()
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },

      hfItem(item){
        this.$confirm('确认恢复？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteStock({stockId:item.stockId,isDelete:0}).then(()=>{
            this.handleSearchList2()
            this.handleSearchList3()
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },

      changeisMy(){
        this.listQuery3.isMy = this.listQuery2.isMy
        this.handleSearchList2();
        this.handleSearchList3();
      },
      synckc(){
        this.btnLoading4 = true
        renewStock().then(()=>{
          this.btnLoading4 = false;
          this.$message({  message: '生成成功！', type: 'success'})
        }).catch(()=>{
          this.btnLoading4 = false;
        })
      },
      fabuStock(){
        this.btnLoading3 = true
        pushStock({isMy:this.listQuery2.isMy}).then(()=>{
          this.btnLoading3 = false;
          this.getList2()
          this.$message({  message: '发布成功！', type: 'success'})
        }).catch(()=>{
          this.btnLoading3 = false;
        })
      },
      getgoodsClassList(){
        goodsClassList().then((res)=>{
          res.forEach((el)=>{
            if(el.cdtCode == 'goods_line'){
              this.classList = el.data
            }
          })

        })
      },
      //显示修改
      showPop(item){
        this.dialogVisible = true;
        this.form = JSON.parse(JSON.stringify(defaultForm));
        this.form.kgId = item.kgId;
        this.form.goodsSn = item.goodsSn;
        this.form.goodsClass = item.goodsClass;
        this.form.price = item.price;
        this.form.expectStock = item.expectStock;
        let warehouseList = [];
        for(let key in item.stock ){
          warehouseList.push(item['stock'][key])
        }
        console.log(warehouseList)
        warehouseList.forEach((el)=>{
          this.form.warehouseList.push({
            stockId:  el.stockId,
            warehouseName: el.warehouseName,
            systemStock: el['systemStock'],
            stock:el['stock'] ,
            authStock:el['authStock'],
          })
        })
      },
      handleClose(){
        this.dialogVisible = false;
      },
      handleConfirm(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            let data = {};
            data.kgId = this.form.kgId;
            data.price = this.form.price;
            data.expectStock = this.form.expectStock;
            data.warehouseList = [];
            this.form.warehouseList.forEach((el)=> {
              data.warehouseList.push({
                stockId: el.stockId,
                authStock: el.authStock,
              })
            })
            goodsUpdateStock(data).then((res)=>{
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.btnLoading = false;
              this.handleClose();
              this.getList2();
            }).catch(()=>{
              this.btnLoading = false;
            })
          }
        })
      },
      //仓库列表
      getGoodsWarehouseList(){
        goodsWarehouseList().then((res)=>{
          this.warehouseList = res
        })
      },

      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },

      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      //获取列表
      getList() {
        this.listLoading = true;
        goodsStockList(this.listQuery).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
      },

      handleSizeChange2(val){
        this.listQuery2.pageNum = 1;
        this.listQuery2.pageSize = val;
        this.getList2();
      },
      handleCurrentChange2(val){
        this.listQuery2.pageNum = val;
        this.getList2();
      },

      handleSearchList2(){
        // this.listQuery2.pageNum = 1;
        this.getList2();
      },

      //获取列表
      getList2() {
        this.listLoading2 = true;
        goodsDayStockList(this.listQuery2).then(response => {
          this.tableData2 = response.list;
          this.count2 = response.count;
          this.listLoading2 = false;
        }).catch(()=>{
          this.listLoading2 = false;
        });
      },


      handleSizeChange3(val){
        this.listQuery3.pageNum = 1;
        this.listQuery3.pageSize = val;
        this.getList3();
      },
      handleCurrentChange3(val){
        this.listQuery3.pageNum = val;
        this.getList3();
      },

      handleSearchList3(){
        // this.listQuery3.pageNum = 1;
        this.getList3();
      },

      //获取列表
      getList3() {
        this.listLoading3 = true;
        goodsDayStockList(this.listQuery3).then(response => {
          this.tableData3 = response.list;
          this.count3 = response.count;
          this.listLoading3 = false;
        }).catch(()=>{
          this.listLoading3 = false;
        });
      },
    },
  }
</script>

<style  lang="scss">
.el-table .stockCell .cell{
     padding:0
   }
</style>
